<template>
	<view class="content">
		<view class="content-box1">
			<view :class="['content-box1-item',tabCurrent == item.id ? 'activeTab' : '']"
				v-for="(item,index) in tabList" :key="index" @click="clickTab(item.id)">
				{{item.name}}
				<view class="active-line" v-if="tabCurrent == item.id"></view>
			</view>
		</view>
		<view class="content-box2">
			<view :class="['content-box2-item',imageCurrent == item.id ? 'active' : '']"
				v-for="(item,index) in imageList" :key="index" @click="changeImage(item.id)">
				<image :src="item.image" mode="widthFix" :style="imageCurrent == item.id ? item.border : ''"></image>
				{{item.name}}
			</view>
		</view>

		<view class="content-box3" hover-class="activeM" v-for="(item,index) in 10" :key="index"
			@click="goDetail(item)">
			<view class="content-box3-con">
				<view class="content-box3-con-t">
					<view class="content-box3-con-l">
						<image src="/static/images/ceshitupian.png" mode="widthFix"></image>
					</view>
					<view class="content-box3-con-r">
						<view class="content-box3-con-r1">
							<view class="content-box3-con-r-text">
								<view class="circle active1">
									待提交
								</view>
								<!-- <view class="circle">
									确权中
								</view> -->
								<!-- <view class="circle active2">
									已完成
								</view> -->
								圆圆胖兜，福气多多｜ip设计 节日 节气 可爱插画
							</view>
							<view class="content-box3-con-r-text1">
								<image src="/static/images/quequanquanbu.png" mode=""></image>
								<view class="text">
									SHIER十二碳
								</view>
							</view>
							<view class="content-box3-con-r-text2">
								阶段性整理阶段性整理胖兜已有图库内容。目前有完善，有新增。胖兜已有图库内容。目前有完善，有新增。
							</view>
						</view>

						<view class="content-box3-con-r2">
							<view class="content-box3-con-r-text4">
								提交时间：2025-07-15 10:20:31
							</view>
						</view>
					</view>
				</view>

				<view class="content-box3-con-b">
					<!-- <view class="submit-btn" hover-class="activeM" @click.stop="applyBanQuan">
						申请版权
					</view> -->
					<view class="submit-btn" hover-class="activeM" @click.stop="checkBanQuan">
						查看版权
					</view>
				</view>

			</view>
		</view>
		<view class="border" style="width: 100%;height: 50rpx;"></view>
		<view class="xinjian" hover-class="activeM" @click="createQq" v-if="tabCurrent == 1">
			<uv-icon name="plus" size="12" color="#fff"></uv-icon>新建确权
		</view>
		<view class="xinjian" hover-class="activeM" @click="applyBanQuan" v-if="tabCurrent == 2">
			<uv-icon name="plus" size="12" color="#fff"></uv-icon>新建版权
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl,
		http
	} from '@/utils/request'
	import emitter from '@/utils/emitter.js'
	import {
		showMsg
	} from '@/utils/showMsg'

	const tabList = ref([{
		id: 1,
		name: '确权中心'
	}, {
		id: 2,
		name: '版权中心'
	}])

	const imageList = ref([{
		id: 1,
		image: '/static/images/quequanquanbu.png',
		name: '全部',
		border: 'border:6rpx solid #ffeecf;'
	}, {
		id: 2,
		image: '/static/images/daiquequanzuopin.png',
		name: '待确权作品',
		border: 'border:6rpx solid #ffe5d7;'
	}, {
		id: 3,
		image: '/static/images/quequanzhongzuopin.png',
		name: '确权中作品',
		border: 'border:6rpx solid #e3edff;'
	}, {
		id: 4,
		image: '/static/images/yiquequanzuopin.png',
		name: '已确权作品',
		border: 'border:6rpx solid #ffdfe0;'
	}])
	const imageCurrent = ref(1)
	const tabCurrent = ref(1)

	const changeImage = (id) => {
		imageCurrent.value = id
	}

	const clickTab = (id) => {
		tabCurrent.value = id
	}

	const createQq = () => {
		uni.navigateTo({
			url: '/subpackages/quequan/createQq'
		})
	}

	const goDetail = (item) => {
		uni.navigateTo({
			url: '/subpackages/quequan/createQqDetail'
		})
	}
	
	const applyBanQuan = () => {
		uni.navigateTo({
			url: '/subpackages/quequan/applyBanQuan'
		})
	}
	
	const checkBanQuan = () => {
		uni.navigateTo({
			url: '/subpackages/quequan/checkBanQuan'
		})
	}
</script>

<style>
	page {
		background-color: #f2f3f7;
	}
</style>
<style lang="scss" scoped>
	.content-box1 {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		display: flex;

		.content-box1-item {
			position: relative;
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #9095A8;
		}

		.activeTab {
			font-weight: 600;
			color: #333;
		}

		.active-line {
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 70rpx;
			height: 8rpx;
			background-color: #e90d00;
			border-radius: 4rpx;
		}
	}

	.content-box2 {
		width: 100%;
		padding: 30rpx 0rpx;
		display: flex;

		.content-box2-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 26rpx;
			color: #9095A8;
			gap: 10rpx;

			image {
				width: 96rpx !important;
				height: 96rpx !important;
				border-radius: 48rpx !important;
				border: 6rpx solid transparent;
			}
		}

		.active {
			font-weight: 600;
			color: #333 !important;
		}
	}

	.content-box3 {
		width: 100%;
		padding: 0rpx 30rpx;
		margin-bottom: 20rpx;

		.content-box3-con {
			position: relative;
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.content-box3-con-t {
				width: 100%;
				display: flex;
			}

			.content-box3-con-b {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-end;

				.submit-btn {
					width: 152rpx;
					height: 60rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #9095A8;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #182033;
				}
			}

			.content-box3-con-l {
				width: 240rpx;
				height: 320rpx;
				border-radius: 10rpx;

				image {
					width: 100% !important;
					height: 100% !important;
					border-radius: 10rpx !important;
				}
			}

			.content-box3-con-r {
				width: calc(100% - 240rpx);
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.content-box3-con-r1 {
					width: 100%;

					.content-box3-con-r-text {
						width: 100%;
						font-weight: 600;
						font-size: 30rpx;
						color: #000000;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;

						.circle {
							float: left;
							width: 92rpx;
							height: 36rpx;
							background: #FFEFD5;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #F89900;
							margin-right: 10rpx;
						}

						.active1 {
							color: #E90D00 !important;
							background: #FFE6E3 !important;
						}

						.active2 {
							color: #41BC55 !important;
							background: #CCFFD4 !important;
						}
					}

					.content-box3-con-r-text1 {
						width: 100%;
						display: flex;
						align-items: center;
						gap: 8rpx;
						margin-top: 12rpx;

						.text {
							width: calc(100% - 36rpx);
							font-weight: 400;
							font-size: 24rpx;
							color: #9095A8;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						image {
							width: 36rpx !important;
							height: 36rpx !important;
						}
					}

					.content-box3-con-r-text2 {
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #9095A8;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						margin-top: 12rpx;
					}
				}

				.content-box3-con-r2 {
					width: 100%;

					.content-box3-con-r-text4 {
						width: 100%;
						font-weight: 400;
						font-size: 24rpx;
						color: #B5BBCA;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.xinjian {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 205rpx;
		height: 76rpx;
		background: #E90D00;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(233, 13, 0, 0.5);
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>